<%@ page import="com.party.core.model.system.TargetType" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>${cIntegralType.id == null ? '添加' : '编辑'}积分分类</title>
    <%@include file="../include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/form.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/publish_form.css">
    <link rel="stylesheet" href="${ctx}/static/uploadCI/upload.css">
    <link rel="stylesheet" href="${ctx}/css/ui/mall/integral_store_form.css">
    <link rel="stylesheet" href="${ctx}/css/form-preview.css">
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <!-- 正文请写在这里 -->
            <div class="add-form-content">
                <form id="myForm" class="layui-form mt20" method="post"
                      action="${ctx}/member/integral/integralType/saveOrUpdate.do">
                    <input type="hidden" name="id" value="${cIntegralType.id}"/>

                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称<span class="f-verify-red">*</span></label>
                        <div class="layui-input-block">
                            <input type="text" name="name" id="name" lay-verify="name" autocomplete="off"
                                   class="layui-input" value="${cIntegralType.name}" maxlength="10"
                                   style="width: 200px; float: left; margin-right: 10px;"
                            >
                            <div class="layui-form-mid layui-word-aux">最多10字符</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">类型<span class="f-verify-red">*</span></label>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <select id="categorys" name="category" lay-verify="categorys"
                                        lay-filter="categorys" ${cIntegralType.category > 0 ? 'disabled="disabled"' : ''}>
                                    <c:forEach var="category" items="${categorys}">
                                        <option value="${category.key}" ${cIntegralType.category == category.key ? 'selected="selected"' : ''}>${category.value}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序<span class="f-verify-red">*</span></label>
                        <div class="layui-input-block">
                            <input type="number" name="sort"
                                   class="layui-input" value="${cIntegralType.sort}"
                                   style="width: 200px;  float: left; margin-right: 10px;" lay-verify="sort">
                        </div>
                    </div>
                    <div class="layui-form-item"
                         id="jpDivId" ${cIntegralType.category == 2 ? 'style="display: none"' : 'style="display: block"'} >
                        <label class="layui-form-label">奖牌图片<span class="f-verify-red">*</span></label>
                        <div class="cover-content">
                            <input type="hidden" name="medalUrl" id="medalUrl" lay-verify="medalUrl"
                                   value="${cIntegralType.medalUrl}"/>
                            <c:if test="${cIntegralType == null || empty cIntegralType.medalUrl}">
                                        <span id="cover-img" class="cover-img"
                                              style="background-image:url(${ctx}/image/posterImg.png)"></span>
                            </c:if>
                            <c:if test="${cIntegralType != null && not empty cIntegralType.medalUrl}">
                                        <span id="cover-img" class="cover-img"
                                              style="background-image:url('${cIntegralType.medalUrl}')"></span>
                            </c:if>
                            <a class="layui-btn layui-btn-danger" id="sel_pic_img">+添加奖牌</a>
                            <div class="form-word-aux">建议尺寸：100X110</div>
                        </div>
                    </div>
                    <%--                    <div id="jpDivId" ${cIntegralType.category == 2 ? 'style="display: none"' : 'style="display: block"'}>
                                            <fieldset class="border mb10" style="width: 500px">
                                                <legend>奖牌</legend>
                                                <div class="form-inner" style="margin-right: 0">
                                                    <div class="carousel-list">
                                                        <div class="carousel-item">
                                                            <div class="tc" style="padding: 5px">
                                                                <div class="red carousel-add-btn">
                                                                    <i class="iconfont icon-add btn-icon"></i>
                                                                    <span style="vertical-align: sub">添加一块奖牌</span>
                                                                </div>
                                                                <div style="font-size: 13px; color: #bfbfbf">
                                                                    必须添加一张次数为0的默认奖牌，建议奖牌图片为尺寸100*110像素
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </fieldset>
                                            <div id="hiddenFieldDiv"></div>
                                            <div id="hiddenCacheDiv">
                                                <input type="hidden" name="_carouselArray"/>
                                            </div>
                                        </div>--%>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit
                               lay-filter="*">立即提交</a>
                            <a href="${ctx}/member/integral/integralType/list.do"
                               class="layui-btn layui-btn-primary">取消</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <%@include file="../include/footer.jsp" %>
    </section>
</div>
<!-- 奖牌 -->
<%--<script type="text/html" id="carouselItem_template">
    <div class="carousel-item carousel-item-new" data-id="{{ d.id || '' }}" data-typeId="{{ d.typeId || '' }}">
        <div>
            <div class="l">
                <div class="upload-img-wrap">
                    {{# if(d.medalPicUrl){ }}
                    <img src="{{ d.medalPicUrl || '' }}" class="item-img"/>
                    <div class="upload-icon upload-icon-update">替换</div>
                    {{# }else{ }}
                    <img src="" class="item-img" style="display: none"/>
                    <div class="upload-icon"> +</div>
                    {{# } }}
                </div>
            </div>
            <div class="l" style="width: 75%">
                <div class="layui-form-item mb10">
                    <label class="layui-form-label">名称：<span class="f-verify-red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" autocomplete="off" class="layui-input carousel-name"
                               value="{{ d.name || '' }}"/>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-bottom: 0">
                    <label class="layui-form-label">次数：<span class="f-verify-red">*</span></label>
                    <div class="layui-input-block">
                        <input type="number" autocomplete="off"
                               class="layui-input carousel-frequency"
                               value="{{d.frequency}}"/>
                    </div>
                </div>
            </div>
            <div class="cl"></div>
        </div>
        <i class="icon-close-new" style="color: red" onclick="removeObj(this, '.carousel-item-new')"></i>
    </div>
</script>--%>
<%--<script type="text/html" id="hiddenForm_template">
    <div class="hidden-field">
        <input type="hidden" name="resources[{{ d.index }}].id" value="{{ d.id }}"/>
        <input type="hidden" name="resources[{{ d.index }}].typeId" value="{{ d.typeId }}"/>
        <input type="hidden" name="resources[{{ d.index }}].name" value="{{ d.name }}"/>
        <input type="hidden" name="resources[{{ d.index }}].frequency" value="{{ d.frequency }}"/>
        <input type="hidden" name="resources[{{ d.index }}].medalPicUrl" value="{{ d.medalPicUrl }}"/>
    </div>
</script>--%>
<script type="text/javascript" src="${ctx}/script/common/form_cache.js"></script>
<script src="${ctx}/script/form/jquery-1.12.4.js"></script>
<script src="${ctx}/script/form/jquery-ui.js"></script>
<script>
    txz.initHeader({
        nav: [{
            name: '积分分类',
            href: '${ctx}/member/integral/integralType/list.do'
        }, {
            name: '${cIntegralType.id == null ? '添加' : '编辑'}积分类型',
            curr: true
        }],
        btns: [{
            type: 'back'
        }]
    });
    var form, laydate, formcache, laytpl;
    var category_val = ${cIntegralType.category}
        $(function () {
            layui.use(['form', 'laydate', 'laytpl'], function () {
                form = layui.form, laydate = layui.laydate, laytpl = layui.laytpl;


                //积分类型分类
                form.on('select(categorys)', function (data) {
                    var iType = data.value;
                    if (iType == 2) {
                        $("#jpDivId").css('display', 'none');
                    } else {
                        $("#jpDivId").css('display', 'block');
                    }
                    category_val = iType;
                    form.render('select');
                });

                //自定义验证规则
                form.verify({
                    name: function (value) {
                        if (value.trim() == "") {
                            return '分类名不能为空';
                        }
                    },
                    sort: function (value) {
                        if (value.trim() == "") {
                            return "请填写序号";
                        }
                        if (value <= 0) {
                            return "请填写正确的序号";
                        }
                    },
                    medalUrl: function (value) {
                        if (category_val != 2 && value.trim() == "") {
                            return '奖牌图片不能为空';
                        }
                    }
                });
                /*                if (util.isValid('
                ${cIntegralType.id}')) {
                    init();
                } else {
                    //加载缓存
                    formcache = new fCache({
                        fCacheKey: 'form_cache_medal',//暂存的key
                        cacheCallback: loadCacheData,//获取到缓存后加载的方法
                        getFormData: getFormData
                    }).init();
                }

                function init() {
                    //loading层
                    var loadIndex = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    txz.ajaxRequest({
                        method: 'post',
                        url: '
                ${ctx}/member/integral/integralMedal/list.do',
                        params: {"typeId": '
                ${cIntegralType.id}'},
                        callBack: function (res) {
                            layer.close(loadIndex);
                            if (res.success) {
                                initCarousel(res.data);
                            } else {
                                util.layerMsgError('加载资源异常');
                            }
                        }
                    });
                }*/

                //监听提交
                form.on('submit', function (data) {
                    /*                    $("#categorys").removeAttr("disabled")
                                        if (category_val != 2) {
                                            var $content = $("#hiddenFieldDiv");
                                            $content.html("");
                                            var getTpl = $("#hiddenForm_template").html();
                                            // 轮播图
                                            var fNum = 0;
                                            var msg = "";
                                            $(".carousel-list .carousel-item-new").each(function (index, ele) {
                                                var name = $(ele).find(".carousel-name").val() || '';
                                                var medalPicUrl = $(ele).find("img").attr('src') || '';
                                                var frequency = $(ele).find(".carousel-frequency").val() || '';

                                                if (!util.isValid(name)) {
                                                    msg = "奖牌名称不能为空";
                                                    return false;
                                                }
                                                if (!util.isValid(medalPicUrl)) {
                                                    msg = "请选择奖牌图片";
                                                    return false;
                                                }
                                                if (!util.isValid(frequency)) {
                                                    msg = "次数不能为空";
                                                    return false;
                                                } else if (frequency < 0) {
                                                    msg = "次数必须大于或等于0";
                                                    return false;
                                                } else if (frequency == 0) {
                                                    fNum++;
                                                }

                                                var index = $(".hidden-field").length;
                                                var map = {
                                                    index: index,
                                                    id: $(ele).attr("data-id"),
                                                    typeId: $(ele).attr("data-typeId"),
                                                    name: name,
                                                    medalPicUrl: medalPicUrl,
                                                    frequency: frequency,
                                                };
                                                laytpl(getTpl).render(map, function (html) {
                                                    $content.append(html);
                                                });
                                            });
                                            if (msg != '') {
                                                util.layerMsgError(msg);
                                                return false;
                                            }
                                            if (fNum != 1) {
                                                util.layerMsgError("必须添加一张次数为0的默认奖牌");
                                                return false;
                                            }
                                        }*/
                    $("#categorys").removeAttr("disabled")
                    submitForm(data);
                });

                function submitForm(data) {
                    txz.submitObject(data.elem, function (callBack) {
                        var formData = getFormData();
                        var action = $("#myForm").attr("action");
                        txz.ajaxRequest({
                            method: 'post',
                            url: action,
                            saveCache: true,
                            cacheObj: formcache,
                            params: formData,
                            callBack: function (res) {
                                typeof callBack === 'function' && callBack();
                                if (res.success) {
                                    util.layerMsgSuccess("提交成功", function () {
                                        location.href = "${ctx}/member/integral/integralType/list.do";
                                    });
                                } else {
                                    util.layerMsgError(res.description)
                                }
                            }
                        });
                    })
                }
            });
            $('#sel_pic_img').click(function () {
                txz.openSelImg({
                    min: 1,
                    max: 1,
                    info: '建议尺寸：800x450',
                    type: '<%=TargetType.MEDAL.getCode()%>',
                    cb: function (imgs) {
                        $('#cover-img').css('background-image', 'url(' + imgs[0].path + ')');
                        $('#medalUrl').val(imgs[0].path);
                    }
                })
            })
        });

        function getFormData() {
            // 奖牌
/*            var _carouselArray = new Array();
            $(".carousel-list .carousel-item-new").each(function (index, ele) {
                var map = {
                    id: $(ele).attr("data-id"),
                    typeId: $(ele).attr("data-typeId") || '',
                    name: $(ele).find(".carousel-name").val() || '',
                    frequency: $(ele).find(".carousel-frequency").val() || '',
                    medalPicUrl: $(ele).find("img").attr('src') || ''
                };
                _carouselArray.push(map);
            });
            $("#hiddenCacheDiv").find("[name=_carouselArray]").val(JSON.stringify(_carouselArray));*/
            var formData = util.serializeForm($('#myForm').serializeArray());
            return formData;
        }
    /*
            // 添加轮播图
            $(".carousel-add-btn").click(function () {
                var $content = $(".carousel-item:last");
                var getTpl = $("#carouselItem_template").html();
                laytpl(getTpl).render({}, function (html) {
                    $content.before(html);
                });
                form.render('select');
            });
            // 轮播图上传
            $(".carousel-list").on('click', '.upload-icon', function () {
                var $this = $(this);
                var $cover_img = $this.siblings("img"), $pic = $this.siblings("[name=pic]");
                txz.openSelImg({
                    min: 1,
                    max: 1,
                    info: '建议尺寸：100x110',
                    type: '<%=TargetType.MEDAL.getCode()%>',
            cb: function (imgs) {
                $cover_img.attr('src', imgs[0].path);
                $pic.val(imgs[0].path);
                $cover_img.css('display', 'block');
                $this.addClass("upload-icon-update");
                $this.text("替换");
            }
        })
    });
    // 拖拽排序
    sortable();

    function sortable() {
        $(".carousel-list").sortable({
            items: ".carousel-item-new",
            placeholder: 'sortable-placeholder',
            opacity: 0.5,
            forcePlaceholderSize: true
        });
        $(".carousel-list").disableSelection();
    }


    //此方法用于加载缓存数据
    function loadCacheData(cacheData) {
        // 轮播图
        if (cacheData['_carouselArray']) {
            var _carouselArray = eval(cacheData['_carouselArray']);
            for (var i = 0; i < _carouselArray.length; i++) {
                var _carousel = _carouselArray[i];
            }
            $(".carousel-list .carousel-item-new").remove();
            initCarousel(_carouselArray);
        }
        form.render();
    }

    function initCarousel(data) {
        var $content = $(".carousel-item:last");
        var getTpl = $("#carouselItem_template").html();
        for (var i = 0; i < data.length; i++) {
            laytpl(getTpl).render(data[i], function (html) {
                $content.before(html);
            });
        }
        form.render('select');
    }

    function removeObj(that, content) {
        $(that).closest(content).remove();
    }*/
</script>
</body>
</html>